/**index.wxss**/
.w-24 {
  flex: 0 0 auto;
  width: 24rpx;
}
.top-box {
  padding: 0rpx 0 80rpx 0;
  background-color: #2E2E38;
}


.content {
  position: relative;
  margin-top: -40rpx;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  padding-top: 40rpx;
  background: #FFF;
  .nav-lists {
    display: flex;
    padding-left: 40rpx;
    width: calc(100% - 40rpx);
    height: calc(74rpx + 14rpx);

    .nav-list {
      flex: 0 0 auto;
      position: relative;
      margin-right: 44rpx;
      height: 74rpx;
      line-height: 74rpx;
      font-size: 30rpx;
      color: rgba(26, 26, 36, .4);
      transition: all .5s ease 0;

      &.active {
        font-size: 44rpx;
        color: #1A1A24;

        &::after {
          content: '';
          position: absolute;
          bottom: -6rpx;
          left: 50%;
          margin-left: -24rpx;
          width: 48rpx;
          height: 6rpx;
          background-color: #FFE501;
        }
      }
    }
  }

  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60rpx;
    padding: 0 40rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1A1A24;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: rgba(26, 26, 36, .6);

      .icon-right {
        font-size: 18rpx;
      }
    }
  }

  .lists {
    display: flex;
    margin-top: 24rpx;
    padding-left: 40rpx;
    width: calc(100% - 40rpx);
    height: calc(280rpx + 84rpx + 8rpx);
    .list {
      display: flex;
      flex-direction: column;
      margin-right: 24rpx;
      width: 280rpx;
      .pic {
        border-radius: 16rpx;
        width: 280rpx;
        height: 280rpx;
      }
  
      .text {
        margin-top: 8rpx;
        padding: 0 8rpx;
        height: 84rpx;
        font-size: 30rpx;
        color: #1A1A24;
        line-height: 42rpx;
      }
    }
  }
}